import React from 'react'
import './Header.css'
import { Link,NavLink,useHistory } from 'react-router-dom';
import { useSelector , useDispatch } from 'react-redux';

export const Header = () => {
    const history=useHistory();
                        //* 接收state，返回state。
    //* 如果是一个对象，想要其中某一个状态
    //* 可以 直接 . 获取，获取所有状态就这样
    const islogin=useSelector(state=>state.islogin);//*获取状态
    //* 或者直接解构出来 
    // const {islogin}=useSelector(state=>state);

    // console.log(islogin);

    const dispathch=useDispatch();

    const logout=()=>{
        // dispathch({type:'LogoutSucess'})
        //* 这是两种方法，一种是增加case，另一种是action传值
        dispathch({type:'LoginSucess',islogin:false});

        localStorage.removeItem('islogin');
        history.replace('/login');
    }

    return (
        <div className="header-wrap">
            <div className="header">
                <img className="logo" src="//static2.cnodejs.org/public/images/cnodejs_light.svg" alt=""/>
                <div className="nav">
                    {/*//! NavLink提供样式设置 */}
                    <NavLink exact activeStyle={{color:'red'}}  to="/">首页</NavLink>
                    <NavLink activeStyle={{color:'red'}}  to='/new'>新手入门</NavLink>
                    <NavLink activeStyle={{color:'red'}}  to='/collect'>收藏</NavLink>
                    <NavLink activeStyle={{color:'red'}}  to='/user'>个人中心</NavLink>

                    {
                        islogin
                        ?<>
                            <a href="">设置</a>
                            <a href="" onClick={logout}>退出</a>
                        </>
                        :<NavLink activeStyle={{color:'red'}}  to='/login'>登录</NavLink>
                    }
                </div>
            </div>
        </div>
    )
}
